<template>
  <el-dialog
    custom-class="warn-dialog"
    model-value
    :before-close="closeDetail"
    :close-on-click-modal="false"
    append-to-body
    draggable
    :show-close="false"
    :width="props.width"
  >
    <template #title>
      <div class="title">
        <div class="presuffix" />
        {{ receiveTitle }}
        <img :src="icons.closeIcon" @click="closeDetail" class="close">
      </div>
      <div class="warn-container">
        <div class="content">
          <div class="data" v-for="(paramsItem, index) in valueData" :key="index">
            <!--文本类型 时间类型-->
            <div
              class="data-field"
              v-if="paramsItem.fieldType === '0' || paramsItem.fieldType === '3'"
            >
              <div class="key">{{ paramsItem.fieldCh }}：</div>
              <div class="field" v-text="(paramsData[paramsItem.fieldEn] === undefined ? '' : paramsData[paramsItem.fieldEn])" />
            </div>
            <!--图片类型-->
            <div class="photo" v-else-if="paramsItem.fieldType === '1'">
              <div class="text">预警现场照片：</div>
              <img :src="paramsData[paramsItem.fieldEn]" class="image">
            </div>
            <!--链接类型-->
            <div class="data-field" v-else-if="paramsItem.fieldType === '2'">
              <div class="key">{{ paramsItem.fieldCh }}：</div>
              <img :src="icons.linkIcon" class="img-link">
              <a
                class="link-content"
                :href="paramsData[paramsItem.fieldEn]"
                target="_blank"
              >{{ (paramsData[paramsItem.fieldEn] === undefined ? '' : paramsData[paramsItem.fieldEn]) }}</a>
            </div>
            <!--视频播放器-->
            <div
              class="data-field"
              v-else-if="paramsItem.fieldType === '4'"
              @click="showVideo(paramsData[paramsItem.fieldEn])"
            >
              <div class="key">{{ paramsItem.fieldCh }}：</div>
              <img :src="icons.videoIcon" class="img-link">
              <div class="link-content" v-text="paramsData[paramsItem.fieldEn]" />
            </div>
          </div>
        </div>
        <div class="bottom" />
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import linkIcon from '@/assets/dialog/warn_link.svg'
import videoIcon from '@/assets/dialog/warn_video.svg'
import { computed, onMounted, ref, watch } from 'vue'
import { findApiOutListById } from '@/api/mapConfig'

import closeIcon from '@/assets/dialog/warn_close.svg'

const props = defineProps({
  width: {
    type: String,
    default: '50%'
  },
  layerId: {
    type: Number,
    default: -1
  },
  paramsData: {
    type: Object,
    default: () => { }
  },
  title: {
    type: String,
    default: ''
  }
})
const receiveTitle = ref('' as any)
// 图层id
const layerId = computed(() => props.layerId)
// 填充所需数据
const paramsData = computed(() => props.paramsData)
// 填充所需数据
const title = ref('' as any)
// 填充所需下发key
const valueData = ref([] as any)
const emit = defineEmits(['closeDetail', 'playVideo'])
const icons = ref({
  linkIcon: linkIcon,
  videoIcon: videoIcon,
  closeIcon: closeIcon
})
const closeDetail = () => {
  emit('closeDetail')
}

const showVideo = (playUrl: any) => {
  emit('playVideo', playUrl)
}

// 通过id获取出参
const findOutById = async (id: any) => {
  const outData = await findApiOutListById(id)
  valueData.value = outData.filter((item: any) => item.isDetail === '1')
  // 通过下发key值取到详情弹窗的标题
  outData.forEach((item: any) => {
    console.log(props.title)
    if (item.isDetailTitle === '1') {
      title.value = paramsData.value[item.fieldEn]
    }
  })
  receiveTitle.value = props.title !== null && props.title !== '' ? props.title : title.value
}

watch(paramsData, () => {
  findOutById(layerId.value)
})
onMounted(() => {
  if (layerId.value) {
    console.log('测试' + layerId.value)
    findOutById(layerId.value)
  }
})
</script>
<style lang="scss" scoped>
.warn-dialog {
  border-radius: 5px;
  background: #1F2935;
  max-width: 50%;
  max-height: 60%;

  .title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    font-size: 14px;
    background: #283442;

    .presuffix {
      width: 3px;
      height: 20px;
      border-radius: 0px 3px 3px 0px;
      background: #E6A23C;
      margin: 0 12px;
    }

    .close {
      width: 18px;
      height: 18px;
      margin-left: auto;
      margin-right: 12px;
      cursor: pointer;
    }
  }
}

.warn-container {
  display: flex;
  flex-direction: column;
  background: #1f2935;

  .content {
    column-count: 3;
    column-gap: 10px;
    padding: 26px;
    box-sizing: border-box;

    .data {
      // column-width: 33.3%;
      height: auto;
      color: #ffffff;
      font-size: 12px;
      box-sizing: border-box;

      .photo {
        display: flex;
        box-sizing: border-box;
        align-items: flex-start;

        .text {
          white-space: nowrap;
        }

        .image {
          width: 120px;
          height: 90px;
          margin-left: 10px;
        }
      }

      .data-field {
        line-height: 30px;
        display: flex;
        color: #ffffff;
        font-size: 12px;
        align-items: flex-start;

        .field {
          flex: 1;
          overflow: hidden;
        }
      }

      .img-link {
        width: 16px;
        height: 16px;
        vertical-align: top;
        padding-top: 7px;
      }

      .link-content {
        flex: 1;
        margin-left: 5px;
        color: #409eff;
        cursor: pointer;
        word-break: break-all;
      }
    }
  }

  .bottom {
    width: 100%;
    height: 20px;
    margin-top: 30px;
    background: #283442;
  }
}
</style>
